<template>
  <view class="tixian">
    <view class="top">
      <image src='../../static/businessImg/back.png' class="topback" @click="back">
      </image>
      <view class="topname">
        入驻申请
      </view>
    </view>

    <view class="tixiancenter">
      <view class="tixiancenteritem">
        <view class="tixiancenteritem1">
          申请人姓名
        </view>

        <input class="tixiancenteritem2" style="color: #0D182E;" placeholder="请填写申请人姓名" v-model="name">

      </view>

      <view class="tixiancenteritem" style="margin-top: 38rpx;">
        <view class="tixiancenteritem1">
          联系电话
        </view>
        <input class="tixiancenteritem2" style="color: #0D182E;" placeholder="请填写联系方式" v-model="phone">

        </input>
      </view>


      <view class="tixiancenteritem" style="margin-top: 38rpx;">
        <view class="tixiancenteritem1">
          身份证号
        </view>
        <input class="tixiancenteritem2" placeholder="请填写身份证号" v-model="idCard">

        </input>
      </view>


      <view class="tixiancenteritem" style="margin-top: 38rpx;border: 0;">
        <view class="tixiancenteritem1">
          身份证正反面
        </view>

      </view>

      <view class="photoview">
        <view class="photoviewitem">
          <view class="photoviewitem_photo">
            <u-image src="../../static/businessImg/idfront.png" mode="" width='200' height="128"
              v-if="idHead == ''"></u-image>
            <u-image :src="idHead" mode="" width='200' height="128" v-else></u-image>
          </view>
          <view class="photoviewitem_bottom">
            <u-image src="../../static/businessImg/xiangji.png" mode="" width='34' height="30"></u-image>

            <view class="photoviewitem_bottom_text" @click="uploadHead">
              上传人像面
            </view>
          </view>
        </view>
        <view class="photoviewitem">
          <view class="photoviewitem_photo">
            <u-image src="../../static/businessImg/idback.png" mode="" width='200' height="128"
              v-if="idBack == ''"></u-image>
            <u-image :src="idBack" mode="" width='200' height="128" v-else></u-image>
          </view>
          <view class="photoviewitem_bottom">
            <u-image src="../../static/businessImg/xiangji.png" mode="" width='34' height="30"></u-image>

            <view class="photoviewitem_bottom_text" @click="uploadBack">
              上传国徽面
            </view>
          </view>
        </view>
      </view>


      <view class="picuploadlist">
        <view class="picuploadlistitem">
          <view class="picuploadlistitemtitle">
            店铺头像
          </view>

          <view class="picuploadlistitempic">
            <view class="detailImages" v-if="dptx != ''">
              <u-image :src="dptx" width="100%" height="100%" mode="scaleToFill"></u-image>
              <view class="deldiv1" @click="deldetailImages('dptx')"></view>
            </view>
            <view class="imageimg" @click="choosedetaipic('dptx')" v-else>
              <u-image src="../../static/businessImg/add.png" width="100%" height="100%" mode="scaleToFill">
              </u-image>
            </view>
          </view>
        </view>
      </view>

      <view class="textesad">
        提交申请代表您同意 <span style="color: #28C749;" @click="navigateTo('/pages/gongyingshang/shangjiaruzhuxieyi')">
          《供应商协议》 </span>
      </view>


      <view class="tixianbtn" @click="handleTixian">
        提交申请
      </view>
    </view>


  </view>
</template>

<script>
import storage from "@/utils/storage.js";

import { storeApply } from "@/api/home.js";
import { supplierApply } from "@/api/gongyingshang.js";
export default {
  data() {
    return {
      name: "",
      idCard: "",
      phone: "",
      idHead: "",
      idBack: "",
      dptx: "",
    };
  },

  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },

    uploadBack() {
      const that = this;

      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths[0];
          uni.uploadFile({
            url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
            filePath: filePath,
            name: "file", // 必须填写，后台用来接收文件

            success: function (uploadFileRes) {
              that.idBack = JSON.parse(uploadFileRes.data).data;
            },
            fail: function (uploadFileErr) {
              console.log(uploadFileErr); // 上传失败后的操作
            },
          });
        },
      });
    },

    uploadHead() {
      const that = this;

      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths[0];
          uni.uploadFile({
            url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
            filePath: filePath,
            name: "file", // 必须填写，后台用来接收文件

            success: function (uploadFileRes) {
              that.idHead = JSON.parse(uploadFileRes.data).data;
            },
            fail: function (uploadFileErr) {
              console.log(uploadFileErr); // 上传失败后的操作
            },
          });
        },
      });
    },

    choosedetaipic(name) {
      const that = this;

      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths[0];
          uni.uploadFile({
            url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
            filePath: filePath,
            name: "file", // 必须填写，后台用来接收文件

            success: function (uploadFileRes) {
              that[name] = JSON.parse(uploadFileRes.data).data;
            },
            fail: function (uploadFileErr) {
              console.log(uploadFileErr); // 上传失败后的操作
            },
          });
        },
      });
    },
    handleTixian() {
      const { name, phone, idBack, idCard, idHead, dptx } = this;
      if (
        name == "" ||
        phone == "" ||
        idBack == "" ||
        idCard == "" ||
        idHead == "" ||
        dptx == ""
      ) {
        return uni.showToast({
          icon: "none",
          title: "请填写完整信息",
        });
      }

      storeApply({
        type: 2,

        userId: storage.getUserInfo().id,
        storeName: this.name,
        storeMobile: this.phone,
        idHead: this.idHead,
        idCard: this.idCard,
        idBack: this.idBack,
        image: dptx,
      }).then((res) => {
        if (res.code == "000000") {
          uni.showToast({
            icon: "none",
            title: "申请完成,等待审核",
          });

          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 2000);
        }
      });
    },
  },
};
</script>

<style scoped>
.tixian {
  width: 100%;
  min-height: 100vh;
  background: #f0f0f0;
}

.top {
  width: 100%;
  height: 188rpx;
  position: relative;
  background: #ffffff;
}

.topback {
  width: 16rpx;
  height: 29rpx;
  position: absolute;
  top: 106rpx;
  left: 32rpx;
}

.topname {
  width: 300rpx;
  height: 32rpx;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 33rpx;
  color: #222222;
  line-height: 32rpx;
  position: absolute;
  top: 104rpx;
  left: 50%;
  transform: translateX(-50%);
}

.tixiancenter {
  width: 703rpx;
  margin: 27rpx auto;
  background: #ffffff;
  padding: 36rpx;
}

.tixiancenteritem {
  height: 55rpx;
  width: 100%;
  line-height: 55rpx;
  border-bottom: 2rpx solid #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tixiancenteritem1 {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 25rpx;
  color: #000000;
  height: 100%;
  width: 50%;
  text-align: left;
}

.tixiancenteritem2 {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 27rpx;
  color: #f14343;
  width: 50%;
  height: 100%;
  text-align: right;
}

.tixianbtn {
  width: 100%;
  height: 71rpx;
  line-height: 71rpx;
  text-align: center;
  margin: 36rpx auto;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  background: rgb(40, 199, 73);
  border-radius: 40rpx;
}

.tixianlast {
  width: 703rpx;
  height: 106rpx;
  padding: 0 35rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.tixianlasttitle {
  width: 50%;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
}

.photoview {
  width: 100%;
  margin-top: 22rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.photoviewitem {
  width: 312rpx;
  height: 222rpx;
  background: rgb(247, 250, 253);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}

.photoviewitem_photo {
  width: 312rpx;
  height: 159rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photoviewitem_bottom {
  background: rgb(109, 120, 254);
  width: 100%;
  height: 63rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photoviewitem_bottom_text {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 27rpx;
  color: #ffffff;
  padding-left: 11rpx;
}

.textesad {
  width: 100%;
  height: 23rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 23rpx;
  color: #979ba6;

  margin: 40rpx 0;
}

.picuploadlist {
  width: 100%;
  margin-top: 55rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
}

.picuploadlistitem {
  width: 50%;
  height: 202rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
  margin-bottom: 20rpx;
}

.picuploadlistitemtitle {
  width: 100%;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 27rpx;
  color: #101624;
  height: 26rpx;
  line-height: 26rpx;
  text-align: center;
}

.picuploadlistitempic {
  width: 155rpx;
  height: 155rpx;
}

.detailImages {
  position: relative;
  width: 100%;
  height: 100%;
}

.imageimg {
  width: 100%;
  height: 100%;
}
</style>
